<template>
  <!--绘画圆环-->
  <canvas :ref="`circle-canvas${time}`" style="width:390px;"></canvas>
</template>
<script>
export default {
  props: {
    num: {
      type: Number,
      default: 0
    },
    radius: {
      type: Number,
      default: 80
    },
     lineWidth: {
      type: Number,
      default: 18
    },
     fontSize1: {
      type: Number,
      default: 30
    },
     fontSize2: {
      type: Number,
      default: 20
    },
     textContent:{
      type: String,
      default:""
    },
    progressStyle:{
      type: Array,
      default:["#ffcd0e","#ff7b0b"]
    }
  },
  data() {
    return {
      time: ""
    };
  },
  created() {
    this.getDate();
  },
  mounted() {
    this.toCanvas("circle-canvas" + this.time, this.num);
  },
  methods: {
    //   毫秒
    getDate() {
      this.time = new Date().getTime();
    },
    toCanvas(id, progress) {
      //canvas进度条
      var canvas = this.$refs[id],
        ctx = canvas.getContext("2d"),
        percent = progress,
        //最终百分比
        circleX = canvas.width / 2, // 中心x坐标
        circleY = canvas.height / 2 + 35, //中心y坐标
        // radius = 80, //圆环半径
        // lineWidth = 8, // 圆形线条的宽度
        // fontSize1 = 30, //字体大小
        // fontSize2 = 14; //字体大小
        radius = this.radius, //圆环半径
        lineWidth = this.lineWidth, // 圆形线条的宽度
        fontSize1 =  this.fontSize1, //字体大小
        fontSize2 = this.fontSize2 //字体大小

      //画圆
      const circle = (cx, cy, r) => {
        ctx.beginPath();
        ctx.lineWidth = lineWidth;
        ctx.strokeStyle = "#f6f6f7";
        ctx.arc(cx, cy, r, Math.PI, Math.PI * 2);
        //ctx.arc(cx, cy, r, Math.PI * 2 / 3, Math.PI * 1 / 3);
        ctx.stroke();
      };

      //画弧线
      const sector = (cx, cy, r, startAngle, endAngle, anti) => {
        ctx.beginPath();
        ctx.lineWidth = lineWidth;

        // 渐变色 - 可自定义
        var linGrad = ctx.createLinearGradient(
          circleX - radius - lineWidth,
          circleY,
          circleX + radius + lineWidth,
          circleY
        );
        linGrad.addColorStop(0.0, this.progressStyle[0]);
        linGrad.addColorStop(1.0, this.progressStyle[1]);
        ctx.strokeStyle = linGrad;
        //圆弧两端的样式
        ctx.lineCap = "round";
        ctx.arc(cx, cy, r, Math.PI, Math.PI * (1 + endAngle / 100));
        ctx.stroke();
        // 同心圆手柄
        // toCircle(endAngle, radius);
      };

      // 画同心圆
      const toCircle = (endAngle, radius, angleA, r, x, y) => {
        angleA = 180 - 180 * (0.01 * endAngle); // 夹角
        r = radius; //半径
        x = circleX + Math.cos(angleA * (Math.PI / 180)) * r; // x 坐标
        y = circleY - Math.sin(angleA * (Math.PI / 180)) * r; // y 坐标
        ctx.beginPath();
        ctx.fillStyle = "#ff820b";
        ctx.arc(x, y, 9, 0, 2 * Math.PI);
        ctx.fill();
        ctx.beginPath();
        ctx.fillStyle = "#fff";
        ctx.arc(x, y, 4, 0, 2 * Math.PI);
        ctx.fill();
      };

      //刷新
      const loading = () => {
        var percent3 = progress;
        if (process >= percent) {
          process = percent3;
          clearInterval(circleLoading);
        }
        //清除canvas内容
        ctx.clearRect(0, 0, circleX * 2, circleY * 2);

        //中间的字
        ctx.font = fontSize1 + "px April";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        // ctx.fillStyle = "#fead29";
        ctx.fillStyle = this.progressStyle[0]
        ctx.fillText(
          parseFloat(process).toFixed(2) + "%",
          circleX,
          (circleY * 3) / 4
        );
        ctx.fillStyle = "#333";
        ctx.font = fontSize2 + "px 微软雅黑";
        ctx.fillText(this.textContent, circleX, circleY + 20);

        //圆形
        circle(circleX, circleY, radius);

        //圆弧
        sector(circleX, circleY, radius, (Math.PI * 2) / 3, process);

        //控制结束时动画的速度
        if (process < percent3) {
          if (process / percent > 0.9) {
            process += 0.35;
          } else if (process / percent > 0.8) {
            process += 0.55;
          } else if (process / percent > 0.7) {
            process += 0.75;
          } else {
            process += 1.05;
          }
        }
      };

      let process = 0.0;
      let process2 = 0.0;

      let circleLoading = window.setInterval(function() {
        loading();
      }, 20);
    }
  }
};
</script>
